import { StyleSheet } from 'react-native';
import {
  APP_BLACK,
  APP_RED,
  APP_YELLOW,
  HEADER_BORDER_GRAY
} from '../../../../../../constant/color';
import { phonePx } from '../../../../../../util/adapt';
import statusBarManager from '../../../../../../util/native/statusBarManager';
import { getScreenInfo } from '../../../../../../util/screen';

const { width } = getScreenInfo({});

export default StyleSheet.create({
  container: {
    position: 'absolute',
    left: 0,
    top: 0,
    width,
    backgroundColor: 'transparent'
  },
  content: {
    borderBottomColor: HEADER_BORDER_GRAY,
    borderBottomWidth: phonePx(1)
  },
  loadInfo: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: phonePx(16) + statusBarManager.getStatusBarHeight()
  },
  loadGrade: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    width: phonePx(90),
    height: phonePx(28),
    borderRadius: phonePx(14),
    backgroundColor: APP_YELLOW,
    marginLeft: phonePx(16)
  },
  grade: {
    fontSize: phonePx(16),
    color: APP_BLACK,
    fontWeight: '500',
    marginLeft: phonePx(14)
  },
  dropDownArrow: {
    width: phonePx(8),
    height: phonePx(6),
    marginRight: phonePx(14)
  },
  loadCart: {
    marginTop: phonePx(11),
    marginRight: phonePx(26)
  },
  cart: {
    width: phonePx(20),
    height: phonePx(20)
  },
  loadCartNum: {
    position: 'absolute',
    top: -phonePx(6),
    right: -phonePx(6),
    width: phonePx(15),
    height: phonePx(15),
    backgroundColor: APP_RED,
    borderRadius: phonePx(7.5),
    alignItems: 'center',
    justifyContent: 'center'
  },
  cartNum: {
    fontSize: phonePx(12),
    color: '#ffffff',
    fontWeight: '600'
  },
  loadTab: {
    flexDirection: 'row',
    marginTop: phonePx(20),
    paddingHorizontal: phonePx(8)
  },
  tab: {
    justifyContent: 'space-between',
    alignItems: 'center',
    marginHorizontal: phonePx(8)
  },
  tabDesc: {
    fontSize: phonePx(24),
    color: APP_BLACK,
    fontWeight: '500'
  },
  selected: {
    width: phonePx(21),
    height: phonePx(6),
    backgroundColor: APP_YELLOW,
    borderRadius: phonePx(6),
    marginBottom: phonePx(-3.5),
    marginTop: phonePx(7)
  },
  space: {
    height: phonePx(2.5)
  }
});
